import React, { Component } from "react";
import { List, InputItem, Toast, Button, Flex } from "antd-mobile";
import { createForm } from "rc-form";
import { getRegisterHandle, getSendSmsHandle } from "../api";

export class Register extends Component {
  constructor(props) {
    super(props);
    this.state = {
      btnStatus: false,
      username: "",
      password: "",
      email: "",
      mobile: "",
      code: "",
      btnNum: 60,
      time: null,
    };
  }
  // 返回
  handlegoBack = () => {
    this.props.history.go(-1);
  };
  // 点击立即注册
  handleRegister = async () => {
    this.props.form.validateFields(async (err) => {
      if (err) return Toast.fail("请检查数据是否输入正确！");
      let data = {
        mobile: this.state.mobile,
        password: this.state.password,
        code: this.state.code,
      };
      let res = await getRegisterHandle(data);
      console.log(res, "注册");
      Toast.fail(res.msg);
      if (res.hasOwnProperty("data")) {
        this.props.distory.push("/login");
      }
    });
  };
  // 获取验证码
  getCode = async () => {
    let res = await getSendSmsHandle({ mobile: this.state.mobile });
    Toast.success(res.msg);
    this.state.btnStatus = true;
    this.setState({ btnStatus: true });
    clearInterval(this.state.time);
    this.state.btnNum = 60;
    this.state.time = setInterval(() => {
      this.state.btnNum--;
      this.setState({ btnNum: this.state.btnNum });
      if (this.state.btnNum === 0) {
        clearInterval(this.state.time);
        this.setState({ btnNum: 60, btnStatus: false });
      }
    }, 1000);
  };

  render() {
    const { getFieldProps, getFieldError } = this.props.form;
    return (
      <div>
        <List style={{ backgroundColor: "white" }} className="picker-list">
          <InputItem
            placeholder="请输入用户名"
            error={getFieldError("mobile") ? true : false}
            onErrorClick={() => Toast.fail("请填写正确的电话格式!", 2)}
            {...getFieldProps("mobile", {
              validateTrigger: "onBlur",
              rules: [
                {
                  required: true,
                  validator: function (rule, value, cb) {
                    let mobileReg = /^1[3|4|5|7|8][0-9]\d{4,8}$/;
                    if (value === "") {
                      cb("电话不能为空");
                    } else {
                      if (mobileReg.test(value)) {
                        cb();
                      } else {
                        cb("请填写正确的电话格式");
                      }
                    }
                  },
                },
              ],
            })}
            onChange={(v) => this.setState({ mobile: v })}
            value={this.state.mobile}
          >
            <span style={{ color: "red" }}>*</span>用户名
          </InputItem>

          <Flex>
            <div style={{ width: "100%" }}>
              <InputItem
                placeholder="请输入验证码"
                error={getFieldError("code") ? true : false}
                onErrorClick={() => Toast.fail("请输入验证码!", 2)}
                {...getFieldProps("code", {
                  validateTrigger: "onBlur",
                  rules: [{ required: true }],
                })}
                onChange={(v) => this.setState({ code: v })}
                value={this.state.code}
              >
                <span style={{ color: "red" }}>*</span>验证码
              </InputItem>
            </div>
            <div>
              <Button
                type="ghost"
                inline
                size="small"
                disabled={this.state.btnStatus}
                onClick={this.getCode}
                style={{ marginRight: "4px" }}
              >
                {this.state.btnStatus
                  ? this.state.btnNum + "后获取验证码"
                  : "获取验证码"}
              </Button>
            </div>
          </Flex>

          <InputItem
            placeholder="请输入密码"
            type="password"
            error={getFieldError("password") ? true : false}
            onErrorClick={() => Toast.fail("请输入密码!", 2)}
            {...getFieldProps("password", {
              validateTrigger: "onBlur",
              rules: [{ required: true }],
            })}
            onChange={(v) => this.setState({ password: v })}
            value={this.state.password}
          >
            <span style={{ color: "red" }}>*</span>密码
          </InputItem>
          {/* validator用于添加自定义校验规则，主要是对这个函数属性的value参数用正则进行匹配，如果有错误就把错误信息传递到回调函数的参数位置，如果没有错误就直接运行回调函数 */}

          {/* 邮箱 */}
          {/* <InputItem
            placeholder="请输入邮箱"
            error={getFieldError("email") ? true : false}
            onErrorClick={() => Toast.fail("请输入正确的邮箱!", 2)}
            {...getFieldProps("email", {
              validateTrigger: "onBlur",
              rules: [
                {
                  required: true,
                  validator: function (rule, value, cb) {
                    let emeilReg = /^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}/;
                    if (value === "") {
                      cb("邮箱不能为空");
                    } else {
                      if (emeilReg.test(value)) {
                        cb();
                      } else {
                        cb("请填写正确的邮箱格式");
                      }
                    }
                  },
                },
              ],
            })}
            onChange={(v) => this.setState({ email: v })}
            value={this.state.email}
          >
            <span style={{ color: "red" }}>*</span>邮箱
          </InputItem> */}
        </List>
        <Button
          style={{ marginTop: "5px" }}
          type="primary"
          onClick={this.handleRegister}
        >
          立即注册
        </Button>
        <Button  style={{ marginTop: "5px" }} onClick={this.handlegoBack}>返回</Button>
      </div>
    );
  }
}

export default createForm()(Register);
